<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多学科智能在线判题模块信息图</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        }
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 500px; /* Adjusted for potentially smaller donut chart */
            margin-left: auto;
            margin-right: auto;
            height: 280px; /* Adjusted for donut chart */
            max-height: 350px;
        }
        @media (min-width: 768px) {
            .chart-container {
                height: 320px; /* Adjusted for donut chart */
            }
        }
        .flowchart-node {
            border: 2px solid;
            padding: 0.75rem 1.25rem;
            border-radius: 0.5rem;
            text-align: center;
            min-width: 120px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .flowchart-node:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .flowchart-arrow {
            position: relative;
            text-align: center;
            font-size: 1.8rem; /* Slightly smaller arrow */
            line-height: 1;
            color: #073B4C; /* Dark navy for arrows */
        }
        .flowchart-arrow.down::after {
            content: '▼';
            display: block;
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
        }
        .flowchart-arrow.right::after {
            content: '►';
            display: inline-block;
            margin: 0 0.5rem;
        }
        .kpi-card {
            padding: 1.5rem;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            text-align: center;
        }
        .icon-placeholder {
            font-size: 2.5rem;
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin: 0 auto 0.75rem auto;
        }
        .section-title {
            font-size: 2.25rem; /* 36px */
            line-height: 2.5rem; /* 40px */
            font-weight: 700;
            text-align: center;
            margin-bottom: 1.5rem; /* 24px */
        }
        .section-intro {
            font-size: 1.125rem; /* 18px */
            line-height: 1.75rem; /* 28px */
            color: #4A5568; /* Tailwind gray-700 */
            text-align: center;
            max-width: 48rem; /* Tailwind max-w-2xl */
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 2.5rem; /* 40px */
        }
    </style>
</head>
<body class="bg-slate-100 text-slate-800">
    <!-- 
        Chosen Color Palette: Energetic & Playful 
        Primary: #118AB2 (Brilliant Blue)
        Green: #06D6A0 (Sea Green)
        Yellow: #FFD166 (Sunglow Yellow)
        Red: #FF6B6B (Pastel Red - for accents or less emphasis)
        Dark Navy Text Accent: #073B4C (Almost Black - for primary text, headings)
        Background: bg-slate-100 (Page)
        Cards: bg-white
    -->
    <!-- 
        Infographic Narrative & Structure Plan:
        1. Hero: Title "多学科智能在线判题模块", Subtitle highlighting Docker, NLP, multi-disciplinary.
        2. Docker Technology: Explain isolated environments, security, stability. HTML/CSS Flowchart for code execution.
        3. NLP for Broader Subjects: Explain analysis of logic/expression in text. HTML/CSS Flowchart for NLP process. Optional Donut chart for NLP feedback breakdown.
        4. Key Features & Benefits: Multi-disciplinary, Intelligent Evaluation, Secure Execution, Personalized Feedback, Teacher Customization using HTML/CSS cards with Unicode icons.
        5. Overall Judging Process: Comprehensive HTML/CSS Flowchart from submission to feedback.
        6. Conclusion: Value as modern education solution.
    -->
    <!-- 
        Visualization Choices & Justifications (NO SVG, NO MERMAID):
        - Hero Section: Text. Goal: Inform.
        - Docker Technology Section:
            - Title & Intro: Text. Goal: Inform.
            - Dockerized Code Execution Flow: HTML/CSS Flowchart (Student Code -> Docker Container (Test Case) -> Result). Goal: Organize. Method: HTML/CSS. (Confirming NO SVG/Mermaid).
            - Benefits: Text list/cards. Goal: Inform. Method: HTML/CSS.
        - NLP for Broader Subjects Section:
            - Title & Intro: Text. Goal: Inform.
            - NLP Analysis Flow: HTML/CSS Flowchart (Student Text Answer -> NLP Analysis Engine -> Score & Suggestions). Goal: Organize. Method: HTML/CSS. (Confirming NO SVG/Mermaid).
            - NLP Feedback Categories (Example): Donut Chart (Logic 50%, Clarity 35%, Coverage 15%). Goal: Inform/Compare. Library: Chart.js (Canvas). (Confirming NO SVG/Mermaid).
        - Key Features & Benefits Section:
            - Title & Intro: Text. Goal: Inform.
            - Benefit Cards (Multi-disciplinary 📚, Intelligent Eval 💡, Secure 🛡️, Feedback 💬, Custom Rules ⚙️): HTML/CSS styled cards with Unicode icons. Goal: Inform. Method: HTML/CSS. (Confirming NO SVG/Mermaid).
        - Overall Judging Process Section:
            - Title & Intro: Text. Goal: Inform.
            - Holistic Flow: HTML/CSS Flowchart (Student Submission -> [IF Code: Docker -> Result] / [IF Text: NLP -> Score] -> Feedback -> History). Goal: Organize. Method: HTML/CSS. (Confirming NO SVG/Mermaid).
        - Conclusion Section: Text. Goal: Inform.
        - General: All charts use Chart.js (Canvas). All diagrams use HTML/CSS/Unicode. NO SVG. NO MERMAID JS. Confirmed.
    -->

    <div class="container mx-auto p-4 md:p-8">

        <header class="text-center mb-16 pt-8">
            <h1 class="text-4xl md:text-5xl font-bold text-[#118AB2] mb-4">多学科智能在线判题模块</h1>
            <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto">融合Docker容器、自然语言处理(NLP)与可自定义规则，打造安全、稳定、智能的跨学科评估解决方案。</p>
        </header>

        <section id="docker-tech" class="mb-20">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-10">
                <h2 class="section-title text-[#073B4C]">核心技术之一：Docker容器化运行</h2>
                <p class="section-intro">本模块利用Docker容器技术，为每个测试用例创建独立的运行环境。这不仅确保了代码执行的安全性与稳定性，更从根本上解决了因环境差异导致的判题错误，保障了评估的公平与一致性。</p>
                
                <div class="mb-8">
                    <h3 class="text-2xl font-semibold text-[#073B4C] mb-6 text-center">Docker如何保障判题一致性？</h3>
                    <div class="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row md:justify-around md:space-x-4 p-6 bg-slate-50 rounded-lg">
                        <div class="flowchart-node border-[#118AB2] text-[#118AB2] bg-blue-100">学生提交代码</div>
                        <div class="flowchart-arrow right hidden md:block"></div>
                        <div class="flowchart-arrow down md:hidden"></div>
                        <div class="flowchart-node border-[#06D6A0] text-[#06D6A0] bg-green-100">Docker容器<br/>(独立测试环境)</div>
                        <div class="flowchart-arrow right hidden md:block"></div>
                        <div class="flowchart-arrow down md:hidden"></div>
                        <div class="flowchart-node border-[#FFD166] text-[#FFD166] bg-yellow-100">运行测试用例<br/>(安全隔离)</div>
                        <div class="flowchart-arrow right hidden md:block"></div>
                        <div class="flowchart-arrow down md:hidden"></div>
                        <div class="flowchart-node border-[#FF6B6B] text-[#FF6B6B] bg-red-100">输出判题结果</div>
                    </div>
                </div>
                <div class="text-center mt-6">
                    <p class="text-slate-700 text-lg">通过Docker，彻底告别“在我机器上能跑”的困境，确保所有评测都在统一、标准的环境下进行。</p>
                </div>
            </div>
        </section>

        <section id="nlp-tech" class="mb-20">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-10">
                <h2 class="section-title text-[#073B4C]">核心技术之二：NLP赋能多学科文本分析</h2>
                <p class="section-intro">针对基础学科和需要文本作答的场景，模块运用先进的自然语言处理(NLP)技术，自动分析学生答案的逻辑严谨性和语言表达的准确性，提供智能评分和具体的改进建议。</p>
                
                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <h3 class="text-2xl font-semibold text-[#073B4C] mb-6 text-center">NLP智能分析流程</h3>
                        <div class="flex flex-col items-center space-y-4 p-6 bg-slate-50 rounded-lg">
                            <div class="flowchart-node border-[#118AB2] text-[#118AB2] bg-blue-100">学生提交文本答案</div>
                            <div class="flowchart-arrow down"></div>
                            <div class="flowchart-node border-[#06D6A0] text-[#06D6A0] bg-green-100">NLP引擎处理<br/>(逻辑/表达分析)</div>
                            <div class="flowchart-arrow down"></div>
                            <div class="flowchart-node border-[#FFD166] text-[#FFD166] bg-yellow-100">生成评分报告</div>
                             <div class="flowchart-arrow down"></div>
                            <div class="flowchart-node border-[#FF6B6B] text-[#FF6B6B] bg-red-100">提供改进建议</div>
                        </div>
                         <p class="text-slate-600 text-sm mt-4 text-center">NLP技术使OJ判题超越代码，深入理解文本内涵，为多学科评估开启新可能。</p>
                    </div>
                    <div>
                        <h3 class="text-2xl font-semibold text-[#073B4C] mb-6 text-center">NLP反馈构成示例</h3>
                        <p class="text-slate-600 mb-4 text-center text-sm">系统不仅给出分数，更着重于帮助学生理解失分点，例如：</p>
                        <div class="chart-container h-[300px] md:h-[350px]">
                            <canvas id="nlpFeedbackChart"></canvas>
                        </div>
                        <p class="text-xs text-slate-500 mt-2 text-center">注：此图表数据为示例，实际反馈会更具体化。</p>
                    </div>
                </div>
            </div>
        </section>

        <section id="key-features" class="mb-20">
             <h2 class="section-title text-[#073B4C]">模块核心功能与优势</h2>
             <p class="section-intro">本智能OJ判题模块集成了多项强大功能，旨在提供全面、高效、公平的评估体验，充分体现现代教育技术的优势。</p>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="kpi-card bg-[#E0F2FE] border border-[#118AB2]/30">
                    <div class="icon-placeholder bg-[#118AB2] text-white">📚</div>
                    <h3 class="text-xl font-semibold text-[#073B4C] mb-2">多学科适用</h3>
                    <p class="text-sm text-slate-600">不仅支持编程题，更通过NLP技术扩展至文科、社科等需要文本分析的学科。</p>
                </div>
                <div class="kpi-card bg-[#D1FAE5] border border-[#06D6A0]/30">
                    <div class="icon-placeholder bg-[#06D6A0] text-white">💡</div>
                    <h3 class="text-xl font-semibold text-[#073B4C] mb-2">智能化评测</h3>
                    <p class="text-sm text-slate-600">AI算法分析答案逻辑与表达，提供精准评分和富有洞察力的改进建议。</p>
                </div>
                <div class="kpi-card bg-[#FEF3C7] border border-[#FFD166]/30">
                    <div class="icon-placeholder bg-[#FFD166] text-white">🛡️</div>
                    <h3 class="text-xl font-semibold text-[#073B4C] mb-2">安全稳定执行</h3>
                    <p class="text-sm text-slate-600">Docker容器确保测试环境隔离与一致，保障代码安全，避免环境问题。</p>
                </div>
                <div class="kpi-card bg-[#FEE2E2] border border-[#FF6B6B]/30">
                    <div class="icon-placeholder bg-[#FF6B6B] text-white">💬</div>
                    <h3 class="text-xl font-semibold text-[#073B4C] mb-2">个性化反馈与历史</h3>
                    <p class="text-sm text-slate-600">学生可查看详细评测结果与反馈，追踪学习历程，促进自我提升。</p>
                </div>
                <div class="kpi-card bg-slate-200 border border-slate-400/30">
                    <div class="icon-placeholder bg-slate-500 text-white">⚙️</div>
                    <h3 class="text-xl font-semibold text-[#073B4C] mb-2">教师自定义规则</h3>
                    <p class="text-sm text-slate-600">教师可灵活定义评测标准和权重，满足多样化的教学场景与评估需求。</p>
                </div>
                 <div class="kpi-card bg-purple-100 border border-purple-400/30">
                    <div class="icon-placeholder bg-purple-500 text-white">🚀</div>
                    <h3 class="text-xl font-semibold text-[#073B4C] mb-2">提升教学效率</h3>
                    <p class="text-sm text-slate-600">自动化评测解放教师重复劳动，使其更专注于教学设计与学生辅导。</p>
                </div>
            </div>
        </section>

        <section id="overall-process" class="mb-16">
            <div class="bg-white rounded-xl shadow-xl p-6 md:p-10">
                <h2 class="section-title text-[#073B4C]">智能判题整体流程概览</h2>
                <p class="section-intro">从学生提交答案到最终获得反馈，本模块通过一系列严谨、智能的步骤，确保每一次评估都准确高效。</p>
                <div class="overflow-x-auto p-4">
                    <div class="flex flex-col items-center space-y-6">
                        <div class="flowchart-node bg-slate-100 border-slate-400 text-slate-700 shadow-md w-full md:w-auto"><strong>1. 学生提交答案</strong><br/>(代码 或 文本)</div>
                        <div class="flowchart-arrow down text-slate-400"></div>

                        <div class="flowchart-node bg-[#E0F2FE] border-[#118AB2] text-[#118AB2] shadow-md w-full md:w-auto"><strong>2. 平台接收与分发</strong><br/>(判断答案类型)</div>
                        <div class="flowchart-arrow down text-[#118AB2]"></div>
                        
                        <div class="grid md:grid-cols-2 gap-x-12 gap-y-6 w-full max-w-4xl mx-auto">
                            <div class="flex flex-col items-center space-y-3 p-4 bg-green-50 rounded-lg border border-green-200">
                                <div class="text-center text-sm font-semibold text-green-700 mb-2">IF: 代码作答</div>
                                <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2 w-full">Docker容器启动</div>
                                <div class="flowchart-arrow down text-green-300 text-base"></div>
                                <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2 w-full">编译与执行 (安全隔离)</div>
                                <div class="flowchart-arrow down text-green-300 text-base"></div>
                                <div class="flowchart-node bg-white border-green-300 text-green-700 text-xs p-2 w-full">比对测试用例与输出</div>
                            </div>

                            <div class="flex flex-col items-center space-y-3 p-4 bg-yellow-50 rounded-lg border border-yellow-300">
                                <div class="text-center text-sm font-semibold text-yellow-700 mb-2">IF: 文本作答</div>
                                <div class="flowchart-node bg-white border-yellow-400 text-yellow-700 text-xs p-2 w-full">NLP引擎启动</div>
                                <div class="flowchart-arrow down text-yellow-400 text-base"></div>
                                <div class="flowchart-node bg-white border-yellow-400 text-yellow-700 text-xs p-2 w-full">逻辑性分析</div>
                                <div class="flowchart-arrow down text-yellow-400 text-base"></div>
                                <div class="flowchart-node bg-white border-yellow-400 text-yellow-700 text-xs p-2 w-full">表达准确性评估</div>
                            </div>
                        </div>
                        
                        <div class="w-full flex justify-center items-center my-2">
                            <div class="h-[2px] bg-slate-300 w-1/4"></div>
                            <div class="flowchart-arrow down text-slate-400 mx-2 transform rotate-[-45deg] translate-y-[-8px] translate-x-[-8px]"></div>
                             <div class="flowchart-arrow down text-slate-400 mx-2 transform rotate-[45deg] translate-y-[-8px] translate-x-[8px]"></div>
                            <div class="h-[2px] bg-slate-300 w-1/4"></div>
                        </div>
                         <div class="w-px bg-slate-300 h-6 md:hidden"></div>


                        <div class="flowchart-node bg-[#FF6B6B] border-red-400 text-red-700 shadow-md w-full md:w-auto"><strong>3. 生成评测结果与反馈</strong><br/>(分数, 错误点, 改进建议)</div>
                        <div class="flowchart-arrow down text-red-400"></div>
                        <div class="flowchart-node bg-purple-200 border-purple-400 text-purple-700 shadow-md w-full md:w-auto"><strong>4. 记录历史数据</strong><br/>(学生查阅, 教师分析)</div>
                    </div>
                </div>
                 <p class="text-sm text-slate-600 mt-8 text-center">这一闭环流程不仅保障了评估的准确性和公正性，更为持续的教学改进和个性化学习提供了坚实的数据基础。</p>
            </div>
        </section>

        <footer class="text-center mt-12 py-8 border-t border-slate-300">
            <p class="text-sm text-slate-500">&copy; 2025 多学科智能在线判题模块。技术赋能教育，创新引领未来。</p>
        </footer>

    </div>

    <script>
        function wrapLabels(label, maxWidth) {
            if (typeof label !== 'string') {
                return label; 
            }
            if (label.length <= maxWidth) {
                return label;
            }
            const words = label.split(/\\s+|\uff0c|\u3001|\\(|\\)|uff08|uff09/); // Split by space, Chinese comma, CJK comma, parentheses
            const lines = [];
            let currentLine = '';
            for (const word of words) {
                if (word === '') continue;
                if ((currentLine + word).length > maxWidth && currentLine.length > 0) {
                    lines.push(currentLine.trim());
                    currentLine = word + ' ';
                } else {
                    currentLine += word + ' ';
                }
            }
            if (currentLine.trim().length > 0) {
                lines.push(currentLine.trim());
            }
            return lines.length > 0 ? lines : [label];
        }

        const commonTooltipTitleCallback = function(tooltipItems) {
            const item = tooltipItems[0];
            let label = item.chart.data.labels[item.dataIndex];
            if (Array.isArray(label)) {
              return label.join(' ');
            } else {
              return label;
            }
        };
        
        const nlpFeedbackData = {
            labels: [wrapLabels('逻辑性分析', 16), wrapLabels('表达准确性', 16), wrapLabels('知识点覆盖度', 16)],
            datasets: [{
                label: 'NLP反馈构成',
                data: [50, 35, 15], // Example data
                backgroundColor: ['#118AB2', '#06D6A0', '#FFD166'],
                borderColor: ['#0E718E', '#05B386', '#E0B550'],
                borderWidth: 1,
                hoverOffset: 4
            }]
        };

        const nlpChartCtx = document.getElementById('nlpFeedbackChart');
        if (nlpChartCtx) {
            new Chart(nlpChartCtx, {
                type: 'doughnut',
                data: nlpFeedbackData,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { 
                            position: 'bottom', 
                            labels: { 
                                font: { size: 10 },
                                boxWidth: 20,
                                padding: 15
                            } 
                        },
                        tooltip: {
                            callbacks: {
                                title: commonTooltipTitleCallback,
                                label: function(context) {
                                    let label = context.dataset.label || '';
                                    if (context.parsed !== null) {
                                        if (Array.isArray(context.chart.data.labels[context.dataIndex])) {
                                             label = context.chart.data.labels[context.dataIndex].join(' ');
                                        } else {
                                             label = context.chart.data.labels[context.dataIndex];
                                        }
                                        label += ': ' + context.parsed + '%';
                                    }
                                    return label;
                                }
                            },
                            backgroundColor: '#073B4C',
                            titleFont: { size: 12, weight: 'bold' },
                            bodyFont: { size: 11 },
                            padding: 10,
                            cornerRadius: 4,
                            displayColors: true
                        }
                    },
                    cutout: '60%'
                }
            });
        }
    </script>
</body>
</html>
